[V0_FILE]typescriptreact:file="app/page.tsx" import LoginForm from "@/components/login-form" export default function Home() { return (

Task Master

) } [V0_FILE]typescriptreact:file="components/login-form.tsx" "use client" import type React from "react" import { useState } from "react" import { useRouter } from "next/navigation" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" export default function LoginForm() { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [isLoading, setIsLoading] = useState(false) const router = useRouter() const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // In a real app, you would validate credentials against your backend // For demo purposes, we'll just redirect to the dashboard setTimeout(() => { setIsLoading(false) router.push("/dashboard") }, 1000) } return ( Login Enter your credentials to access your tasks ) } [V0_FILE]typescriptreact:file="app/dashboard/page.tsx" import TaskList from "@/components/task-list" import { DashboardStats } from "@/components/dashboard-stats" import { AddTaskButton } from "@/components/add-task-button" export default function DashboardPage() { return (

Dashboard

Today's Tasks

) } [V0_FILE]typescriptreact:file="components/task-list.tsx" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { TaskItem } from "@/components/task-item" // Mock data for demonstration const INITIAL_TASKS = [ { id: 1, title: "Complete project proposal", status: "in-progress", date: new Date(), important: false }, { id: 2, title: "Schedule team meeting", status: "not-started", date: new Date(), important: true }, { id: 3, title: "Review client feedback", status: "completed", date: new Date(), important: false }, { id: 4, title: "Update documentation", status: "not-started", date: new Date(), important: false }, ] export default function TaskList() { const [tasks, setTasks] = useState(INITIAL_TASKS) const updateTaskStatus = (id: number, status: string) => { setTasks(tasks.map((task) => (task.id === id ? { ...task, status } : task))) } const markAsImportant = (id: number) => { setTasks(tasks.map((task) => (task.id === id ? { ...task, important: !task.important } : task))) } return ( All Today Important {tasks.map((task) => ( updateTaskStatus(task.id, status)} onToggleImportant={() => markAsImportant(task.id)} /> ))} {tasks .filter((task) => { const today = new Date() const taskDate = new Date(task.date) return taskDate.toDateString() === today.toDateString() }) .map((task) => ( updateTaskStatus(task.id, status)} onToggleImportant={() => markAsImportant(task.id)} /> ))} {tasks .filter((task) => task.important) .map((task) => ( updateTaskStatus(task.id, status)} onToggleImportant={() => markAsImportant(task.id)} /> ))} ) } [V0_FILE]typescriptreact:file="components/task-item.tsx" "use client" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Star, Clock, CheckCircle } from "lucide-react" type Task = { id: number title: string status: string date: Date important: boolean } type TaskItemProps = { task: Task onStatusChange: (status: string) => void onToggleImportant: () => void } export function TaskItem({ task, onStatusChange, onToggleImportant }: TaskItemProps) { const statusColors = { completed: "bg-green-100 text-green-800", "in-progress": "bg-blue-100 text-blue-800", "not-started": "bg-gray-100 text-gray-800", } const statusIcons = { completed: , "in-progress": , "not-started": , } return (

{task.title}

{new Date(task.date).toLocaleDateString()}

{statusIcons[task.status as keyof typeof statusIcons]} {task.status === "in-progress" ? "In Progress" : task.status === "not-started" ? "Not Started" : "Completed"}

) } [V0_FILE]typescriptreact:file="components/add-task-button.tsx" "use client" import type React from "react" import { useState } from "react" import { Plus } from "lucide-react" import { Button } from "@/components/ui/button" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { DatePicker } from "@/components/date-picker" export function AddTaskButton() { const [open, setOpen] = useState(false) const [taskTitle, setTaskTitle] = useState("") const [date, setDate] = useState(new Date()) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Capitalize first letter const capitalizedTitle = taskTitle.charAt(0).toUpperCase() + taskTitle.slice(1) // Here you would typically save the task to your state or backend console.log("Creating task:", { title: capitalizedTitle, date }) // Reset form and close dialog setTaskTitle("") setDate(new Date()) setOpen(false) } return ( <> ) } [V0_FILE]typescriptreact:file="components/date-picker.tsx" "use client" import { format } from "date-fns" import { CalendarIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Calendar } from "@/components/ui/calendar" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" interface DatePickerProps { date?: Date setDate: (date?: Date) => void } export function DatePicker({ date, setDate }: DatePickerProps) { return ( ) } [V0_FILE]typescriptreact:file="components/dashboard-stats.tsx" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { CheckCircle, Calendar, Clock } from "lucide-react" export function DashboardStats() { return ( <> Tasks Completed

+5 from last month

Hours Worked

42.5h

+2.5h from last month

Remaining Tasks

-3 from last week

) } [V0_FILE]typescriptreact:file="app/dashboard/calendar/page.tsx" import { CalendarView } from "@/components/calendar-view" export default function CalendarPage() { return (

Calendar View

) } [V0_FILE]typescriptreact:file="app/dashboard/summary/page.tsx" import { MonthlySummary } from "@/components/monthly-summary" export default function SummaryPage() { return (

Monthly Summary

) } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" import AppNavbar from "@/components/app-navbar" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Task Master | Todo List Application", description: "A modern todo list application for managing your tasks", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/app-navbar.tsx" isFixed="true" isQuickEdit="true" "use client" import { usePathname } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Home, Calendar, BarChart2, User } from "lucide-react" export default function AppNavbar() { const pathname = usePathname() // Don't show navbar on login page if (pathname === "/") return null return (

Task Master

) } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/calendar-view.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Calendar } from "@/components/ui/calendar" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { addDays, format, isSameDay } from "date-fns" // Mock data for demonstration const TASKS_BY_DATE = [ { date: new Date(), tasks: [ { title: "Team meeting", status: "completed" }, { title: "Project review", status: "in-progress" }, ], }, { date: addDays(new Date(), 1), tasks: [{ title: "Client call", status: "not-started" }] }, { date: addDays(new Date(), 3), tasks: [ { title: "Presentation", status: "not-started" }, { title: "Report submission", status: "not-started" }, ], }, ] export function CalendarView() { const [selectedDate, setSelectedDate] = useState(new Date()) // Find tasks for the selected date const selectedDateTasks = selectedDate ? TASKS_BY_DATE.find((item) => isSameDay(item.date, selectedDate))?.tasks || [] : [] // Function to customize day cell rendering const renderDay = (day: Date | undefined) => { // Check if day is a valid Date object if (!day || !(day instanceof Date) || isNaN(day.getTime())) { return null } const dateHasTasks = TASKS_BY_DATE.some((item) => isSameDay(item.date, day)) if (dateHasTasks) { return (

{day.getDate()}

) } return day.getDate() } return (

Calendar renderDay(day), }} /> {selectedDate ? format(selectedDate, "MMMM d, yyyy") : "No date selected"} {selectedDateTasks.length > 0 ? (

{selectedDateTasks.map((task, index) => (

{task.title} {task.status === "in-progress" ? "In Progress" : task.status === "not-started" ? "Not Started" : "Completed"}

))}

) : (

No tasks scheduled for this date.

)}

) } [V0_FILE]typescriptreact:file="components/monthly-summary.tsx" isQuickEdit="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" // Mock data for demonstration const MONTHLY_DATA = [ { month: "January", completed: 12, hours: 28 }, { month: "February", completed: 18, hours: 34 }, { month: "March", completed: 24, hours: 42 }, { month: "April", completed: 32, hours: 38 }, { month: "May", completed: 28, hours: 36 }, { month: "June", completed: 34, hours: 50 }, ] // Weekly data const WEEKLY_DATA = [ { week: "Week 1", completed: 6, hours: 12 }, { week: "Week 2", completed: 8, hours: 14 }, { week: "Week 3", completed: 10, hours: 12 }, { week: "Week 4", completed: 12, hours: 16 }, ] export function MonthlySummary() { // Find the maximum value for scaling const maxCompleted = Math.max(...MONTHLY_DATA.map((item) => item.completed)) const maxHours = Math.max(...MONTHLY_DATA.map((item) => item.hours)) return (

Task Completion

{MONTHLY_DATA.map((item, index) => (

{item.month}

))}

0 {maxCompleted}

Hours Worked

{MONTHLY_DATA.map((item, index) => (

{item.month}

))}

0 {maxHours}

Statistics

Average Tasks per Month

24.6

Average Hours per Month

38.0

Total Tasks (YTD)

148

Total Hours (YTD)

228

Efficiency

Average Time per Task

1.54 hours

-0.2 hours from last month

Completion Rate

92%

↑ 3%

) }

About

Tags

Share

About

Tags

Share

More Templates Like This